﻿@{
    ViewBag.Title = "testOther";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Head{
    <style type="text/css">
        body
        {
            padding: 20px;
        }
    </style>
}
<div style="width: 800px;">
    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                ×</button>
            <h3 id="myModalLabel">
                Modal header</h3>
        </div>
        <div class="modal-body">
            <p>
                One fine body…</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">
                Close</button>
            <button class="btn btn-primary">
                Save changes</button>
        </div>
    </div>
    <div class="bs-docs-example">
        <ul class="breadcrumb">
            <li class="active">Home</li>
        </ul>
        <ul class="breadcrumb">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li class="active">Library</li>
        </ul>
        <ul class="breadcrumb" style="margin-bottom: 5px;">
            <li><a href="#">Home</a> <span class="divider">/</span></li>
            <li><a href="#">Library</a> <span class="divider">/</span></li>
            <li class="active">Data</li>
        </ul>
    </div>
    <div class="bs-docs-example" style="background-color: #f5f5f5;">
        <input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead"
            data-items="4" data-source="[&quot;Alabama&quot;,&quot;Alaska&quot;,&quot;Arizona&quot;,&quot;Arkansas&quot;,&quot;California&quot;,&quot;Colorado&quot;,&quot;Connecticut&quot;,&quot;Delaware&quot;,&quot;Florida&quot;,&quot;Georgia&quot;,&quot;Hawaii&quot;,&quot;Idaho&quot;,&quot;Illinois&quot;,&quot;Indiana&quot;,&quot;Iowa&quot;,&quot;Kansas&quot;,&quot;Kentucky&quot;,&quot;Louisiana&quot;,&quot;Maine&quot;,&quot;Maryland&quot;,&quot;Massachusetts&quot;,&quot;Michigan&quot;,&quot;Minnesota&quot;,&quot;Mississippi&quot;,&quot;Missouri&quot;,&quot;Montana&quot;,&quot;Nebraska&quot;,&quot;Nevada&quot;,&quot;New Hampshire&quot;,&quot;New Jersey&quot;,&quot;New Mexico&quot;,&quot;New York&quot;,&quot;North Dakota&quot;,&quot;North Carolina&quot;,&quot;Ohio&quot;,&quot;Oklahoma&quot;,&quot;Oregon&quot;,&quot;Pennsylvania&quot;,&quot;Rhode Island&quot;,&quot;South Carolina&quot;,&quot;South Dakota&quot;,&quot;Tennessee&quot;,&quot;Texas&quot;,&quot;Utah&quot;,&quot;Vermont&quot;,&quot;Virginia&quot;,&quot;Washington&quot;,&quot;West Virginia&quot;,&quot;Wisconsin&quot;,&quot;Wyoming&quot;]"><ul
                class="typeahead dropdown-menu" style="top: 69px; left: 19px; display: none;">
                <li data-value="Alabama" class=""><a href="#"><strong>A</strong>l<strong>a</strong>b<strong>a</strong>m<strong>a</strong></a></li><li
                    data-value="Alaska" class=""><a href="#"><strong>A</strong>l<strong>a</strong>sk<strong>a</strong></a></li><li
                        data-value="Arizona" class="active"><a href="#"><strong>A</strong>rizon<strong>a</strong></a></li><li
                            data-value="Arkansas"><a href="#"><strong>A</strong>rk<strong>a</strong>ns<strong>a</strong>s</a></li></ul>
    </div>
    <br />
    <div class="bs-docs-example">
        <div class="progress progress-info" style="margin-bottom: 9px;">
            <div class="bar" style="width: 20%">
            </div>
        </div>
        <div class="progress progress-success" style="margin-bottom: 9px;">
            <div class="bar" style="width: 40%">
            </div>
        </div>
        <div class="progress progress-warning" style="margin-bottom: 9px;">
            <div class="bar" style="width: 60%">
            </div>
        </div>
        <div class="progress progress-danger">
            <div class="bar" style="width: 80%">
            </div>
        </div>
    </div>
    <div class="progress">
        <div class="bar bar-success" style="width: 35%">
        </div>
        <div class="bar bar-warning" style="width: 20%">
        </div>
        <div class="bar bar-danger" style="width: 10%">
        </div>
    </div>
    <div class="progress progress-striped active">
        <div class="bar" style="width: 45%">
        </div>
    </div>
    <div class="progress progress-striped">
        <div class="bar" style="width: 20%;">
        </div>
    </div>
    <div class="bs-docs-example">
        <div class="alert alert-block alert-error fade in" style="">
            <button type="button" class="close" data-dismiss="alert">
                ×</button>
            <h4 class="alert-heading" style="">
                Oh snap! You got an error!</h4>
            <p>
                Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat
                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus
                sit amet fermentum.</p>
            <p>
                <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do
                    this</a>
            </p>
        </div>
    </div>
    <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert">
            ×</button>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
    <div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert">
            ×</button>
        <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-error">
        <button type="button" class="close" data-dismiss="alert">
            ×</button>
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
    <div class="alert alert-block">
        <button type="button" class="close" data-dismiss="alert">
            ×</button>
        <h4>
            Warning!</h4>
        <p>
            Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra
            augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>
    <div class="alert">
        <button type="button" class="close" data-dismiss="alert">
            ×</button>
        <strong>Warning!</strong> Best check yo self, you're not looking too good.
    </div>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Example
                </th>
                <th>
                    Markup
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Default
                </td>
                <td>
                    <span class="badge">1</span>
                </td>
                <td>
                    <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    Success
                </td>
                <td>
                    <span class="badge badge-success">2</span>
                </td>
                <td>
                    <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    Warning
                </td>
                <td>
                    <span class="badge badge-warning">4</span>
                </td>
                <td>
                    <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    Important
                </td>
                <td>
                    <span class="badge badge-important">6</span>
                </td>
                <td>
                    <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    Info
                </td>
                <td>
                    <span class="badge badge-info">8</span>
                </td>
                <td>
                    <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    Inverse
                </td>
                <td>
                    <span class="badge badge-inverse">10</span>
                </td>
                <td>
                    <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                </td>
            </tr>
        </tbody>
    </table>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>
                    Labels
                </th>
                <th>
                    Markup
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span class="label">Default</span>
                </td>
                <td>
                    <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="label label-success">Success</span>
                </td>
                <td>
                    <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="label label-warning">Warning</span>
                </td>
                <td>
                    <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="label label-important">Important</span>
                </td>
                <td>
                    <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="label label-info">Info</span>
                </td>
                <td>
                    <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="label label-inverse">Inverse</span>
                </td>
                <td>
                    <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="bs-docs-example">
        <ul class="pager">
            <li class="previous disabled"><a href="#">← Older</a></li>
            <li class="next"><a href="#">Newer →</a></li>
        </ul>
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </div>
    <table class="table table-hover">
        <thead>
            <tr class="success">
                <th>
                    #
                </th>
                <th>
                    First Name
                </th>
                <th>
                    Last Name
                </th>
                <th>
                    Username
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">
                    1
                </td>
                <td>
                    Mark
                </td>
                <td>
                    Otto
                </td>
                <td>
                    @@mdo
                </td>
            </tr>
            <tr>
                <td>
                    Mark
                </td>
                <td>
                    Otto
                </td>
                <td>
                    @@TwBootstrap
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    Jacob
                </td>
                <td>
                    Thornton
                </td>
                <td>
                    @@fat
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
                <td colspan="2">
                    Larry the Bird
                </td>
                <td>
                    @@twitter
                </td>
            </tr>
        </tbody>
    </table>
    <div class="bs-docs-example">
        <div class="pagination pagination-centered">
            <ul>
                <li><a href="#">«</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">»</a></li>
            </ul>
        </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <p>
        For example, <code>&lt;section&gt;</code> should be wrapped as inline.
    </p>
    <pre>
  &lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
    <blockquote class="pull-right">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
            ante.</p>
        <small>Someone famous <cite title="Source Title">Source Title</cite></small>
    </blockquote>
    <br />
    <br />
    <br />
    <br />
    <br />
    <dl class="dl-horizontal">
        <dt>Description lists</dt>
        <dd>
            A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>
            Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
        <dd>
            Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta</dt>
        <dd>
            Etiam porta sem malesuada magna mollis euismod.</dd>
        <dt>Felis euismod semper eget lacinia</dt>
        <dd>
            Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
            massa justo sit amet risus.</dd>
    </dl>
    <p style="height: 1000px;">
    </p>
</div>
